<template>
  <div class="classfiy">
    <div class="top">
      <el-button
        class="primary"
        icon="el-icon-plus"
        size="small"
        @click="relieve"
        >解除禁用</el-button
      >
      <el-button
        type="danger"
        icon="el-icon-delete"
        size="small"
        @click="forbidden"
        >禁用账户</el-button
      >
    </div>
    <div class="tablist">
      <el-table
        ref="multipleTable"
        :data="userlist"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="nickName" label="昵称" width="120">
        </el-table-column>
        <el-table-column prop="loginName" label="登录名" width="120">
        </el-table-column>
        <el-table-column label="身份状态">
          <template slot-scope="scope">{{
            scope.row.lockedFlag ? "禁用" : "正常"
          }}</template>
        </el-table-column>
        <el-table-column
          prop="isDeleted"
          label="是否注销"
          show-overflow-tooltip
        >
          <template slot-scope="scope"
            >{{ scope.row.isDeleted ? "已注销" : "正常" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="注册时间"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      multipleSelection: [],
      total: 1,
      pagination: 1,
      userlist: [],
    };
  },
  created() {
    this.getuserlist();
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 当选择项发生变化时会触发该事件
    handleSelectionChange(val) {
      // val存储选中项的全部信息（数组形式存储）
      this.multipleSelection = val;
    },
    // 解除禁用
    relieve() {
      // 观察当前是否已选择
      if (!this.multipleSelection.length) {
        this.$message({
          message: "请选择选项",
          type: "warning",
        });
        return;
      }
      this.$request
        .put(
          `/users/0`,
          {
            ids: this.multipleSelection.map((item) => item.userId),
          },
          {
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              token: localStorage.getItem("token") || "",
              "Content-Type": "application/json",
            },
          }
        )
        .then(({ data }) => {
          data.resultCode == 200
            ? this.$message({
                message: "解除成功",
                type: "success",
              })
            : this.$message({
                message: data.message,
                type: "warning",
              });
          this.getuserlist();
        });
    },
    // 禁用用户
    forbidden() {
      if (!this.multipleSelection.length) {
        this.$message({
          message: "请选择选项",
          type: "warning",
        });
        return;
      }
      this.$request
        .put(
          `/users/1`,
          {
            ids: this.multipleSelection.map((item) => item.userId),
          },
          {
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              token: localStorage.getItem("token") || "",
              "Content-Type": "application/json",
            },
          }
        )
        .then(({ data }) => {
          data.resultCode == 200
            ? this.$message({
                message: "禁用成功",
                type: "success",
              })
            : this.$message({
                message: data.message,
                type: "warning",
              });
          this.getuserlist();
        });
    },
    // 页数变化
    handleCurrentChange(val) {
      this.pagination = val;
      this.getuserlist();
    },
    // 获取用户列表
    getuserlist() {
      this.$request
        .get("/users", {
          params: {
            pageNumber: this.pagination,
            pageSize: 10,
          },
          headers: {
            "X-Requested-With": "XMLHttpRequest",
            token: localStorage.getItem("token") || "",
          },
        })
        .then(({ data }) => {
          this.total = data.data.totalCount;
          this.userlist = data.data.list;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.classfiy {
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  .top {
    padding: 18px 20px;
    border: 1px solid #ebeef5;
    .primary {
      color: #fff;
      background-color: #1baeae;
      border-color: #1baeae;
    }
  }
  .tablist {
    padding: 20px;
  }
}
</style>
